<template>
    <!-- component/showtime/index.wxml -->
    <view class="datebox">
        <view @tap="onitemactive" :data-index="item.index" v-for="(item, index) in weekTime" :key="index">
            <view :class="'date mt-20 ' + (indexs === index ? 'activetext' : '')" @tap="onClick" :data-item="item" :data-indexs="index">
                <view v-if="index == 0">今天</view>
                <view v-else-if="index == 1">明天</view>
                <view v-else>{{ item.Day }}</view>
                <view>{{ item.Week }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// component/showtime/index.js
const { getSevenDay } = require('../../utils/util.js');

export default {
    data() {
        return {
            weekTime: getSevenDay(),
            indexs: 0
        };
    },
    /**
     * 组件的属性列表
     */
    props: {},
    /**
     * 组件的方法列表
     */
    methods: {
        onClick(e) {
            const { item, indexs } = e.currentTarget.dataset;
            this.setData({
                indexs
            }); // 传递给父元素

            this.$emit('gettime', {
                detail: item
            });
        },

        onitemactive() {
            console.log('占位：函数 onitemactive 未声明');
        }
    }
};
</script>
<style>
/* component/showtime/index.wxss */
/* 时间 */
.datebox {
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    overflow-x: auto;
    margin: 0 10rpx;
}

.date {
    width: 110rpx;
    height: 74rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    margin: 0 20rpx;
    display: inline-table;
    padding: 10rpx 0;
}

.activetext {
    color: #ff8722;
}
</style>
